<!-- 数据 -->
<div class="modal fade" id="create-data-modal">
    <div class="modal-dialog" role="document" style="width: 800px;">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
               <span style="font-size: 20px;"><span id="referralname">添加数据</span></span>
           </div>
           <div class="modal-body">
               <div data-bind="visible: loading" class="loading-panel" style="display: none;">
                   <i class="fa fa-spin fa-spinner"></i>
               </div>
               <form class="form-horizontal modelform">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3"><span class="required" style="color: red">*</span>书名</label>
                                <div class="col-lg-8">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" style="z-index: 3;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">选择 <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">选择</a></li>
                                                <li><a href="#">新增</a></li>
                                            </ul>
                                        </div>
                                        <div>
                                            <select name="book_id" id="book_id" class="selectpicker multipleSelete" data-live-search="true">
                                                {volist name="bookList" id="vo"}
                                                <option value={$vo.id} {if input('get.id')==$vo.id}selected {/if}>{$vo.title}</option>
                                                {/volist}
                                            </select>
                                            <input style="display: none;" id="book_name" type="text" class="form-control" name="book_name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">来源</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="source">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">方案</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="scheme">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">渠道</label>
                                <div class="col-sm-8">
                                    <select name="platform" id="paltform" class="selectpicker form-control">
                                        <option value="百度" selected >百度</option>
                                        <option value="知乎" >知乎</option>
                                        <option value="抖音" >抖音</option>
                                        <option value="微博" >微博</option>
                                        <option value="腾讯" >腾讯</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3"><span class="required" style="color: red">*</span>消耗</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="consume">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">单点</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="point">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3"><span class="required" style="color: red">*</span>粉价</label></label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="price">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">付费率</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="rate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">当日回收</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="income_one">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">2日回收</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="income_two">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">3日回收</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="income_three">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">总回收</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="income">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">评级</label>
                                <div class="col-sm-8">
                                    <select name="score" id="score" class="selectpicker form-control">
                                        <option value=999 selected > - </option>
                                        <option value=1 > A </option>
                                        <option value=2 > B </option>
                                        <option value=3 > C </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-sm-3">文案编号</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" name="wenan">
                                </div>
                            </div>
                        </div>
                    </div>
               </form>
           </div>
           <div class="modal-footer">
               <button type="button" id="createdata" class="btn btn-primary ">提交</button>
           </div>
       </div>
   </div>
</div>
<script>
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
            layer = layui.layer;
        // 版本
        laypage.render({
            elem: 'dataPage',
            count: '{$dataPage.dataTotal}',
            theme: '#1E9FFF',
            limit: '{$dataPage.dataLimit}',
            curr: '{$dataPage.dataPage}',
            jump: function (obj, first) {
                if (!first) {
                    goDataUrl({
                        dataPage:obj.curr
                    })
                }
            }
        });
    })

    function goDataUrl(params) {
        function objectToQuery() {
            let obj = arguments[0];
            let prefix = arguments[1];
            if (typeof obj !== "object") return "";
            const attrs = Object.keys(obj);
            return attrs.reduce((query, attr, index) => {
                // 判断是否是第一层第一个循环
                if (index === 0 && !prefix) query += "?";
                if (typeof obj[attr] === "object") {
                    const subPrefix = prefix ? `${prefix}[${attr}]` : attr;
                    query += this.objectToQuery(obj[attr], subPrefix);
                } else {
                    if (prefix) {
                        query += `${prefix}[${attr}]=${obj[attr]}`;
                    } else {
                        query += `${attr}=${obj[attr]}`;
                    }
                }
                // 判断是否是第一层最后一个循环
                if (index !== attrs.length - 1) query += "&";
                return query;
            }, "");
        }
        let {
            book_id = '{$book_id}', //书名id
            dataPage = '{$dataPage.dataPage}', //分页页码
        } = params
        window.location.href = objectToQuery({
            book_id,
            dataPage
        })
    }

    // 数据新增
    $("#createdata").on('click',function(){
        var data = $('.modelform').serializeJson();
        let params = ['book_id','consume', 'price']
        for (var i = 0; i < params.length; i++){
            if(!data[params[i]]){
                updateAlert("必填参数不能为空", 'danger');
                return false;
            }
        }
        var url = "{:url('addMaterualData')}";
        $.ajax({
            type: "POST",
            url: url,
            data:data,
            dataType: "json",
            success: function(data){
                if(data.code==1){
                    updateAlert(data.msg, 'success');
                    setTimeout(function() {
                        window.location.reload();
                    }, 100);
                }else{
                    updateAlert("添加，"+data.msg, 'danger');
                }
            },
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    });

    $('#create-data-modal .dropdown-menu a').click(function(){
        let nowText = $(this).text();
        $('#create-data-modal .input-group-btn button').html($(this).text()+' <span class="caret"></span>')
        if(nowText == '选择'){
            $('#book_id').show()
            $('#create-data-modal .input-group .bootstrap-select').show()
            $('#book_name').hide()
            $('#book_name').val('')
        }else{
            $('#book_id').hide()
            $('#create-data-modal .input-group .bootstrap-select').hide()
            $('#book_name').show()
        }
    })
</script>